<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org" >
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>头像上传</title>
<link rel="stylesheet" th:href="@{/static/css/style3.css}" type="text/css" />
<link rel="stylesheet" th:href="@{/static/layui/css/layui.css}"/>
</head>
<body>
<div style="margin-left:10px;" class="container">
  <div class="imageBox">
	<div class="thumbBox"></div>
	<div class="spinner" style="display: none">Loading...</div>
  </div>
  <div class="action"> 
	<div class="new-contentarea tc"> 
		<a href="javascript:void(0)" class="upload-img">
			<label for="upload-file">选择照片</label>
	  </a>
	  <input type="file" class="" name="upload-file" id="upload-file" />
	</div>
	<input type="button" id="btnCrop"  class="Btnsty_peyton" value="裁切">
	<input type="button" id="btnZoomIn" class="Btnsty_peyton" value="+"  >
	<input type="button" id="btnZoomOut" class="Btnsty_peyton" value="-" >
  </div>
  <div class="cropped"></div>
	<button style="margin-top:30px;  margin-left:-150px;" onclick="upload()" type="button"  class="layui-btn">
	<i class="layui-icon">&#xe608;</i>上传提交
	</button>
</div>
<script th:src="@{/static/layui/layui.js}"></script>
<script th:src="@{/static/js/jquery-1.11.0.min.js}" type="text/javascript"></script>
<script type="text/javascript" th:src="@{/static/js/cropbox.js}"></script>
<script th:inline="javascript" type="text/javascript">
    var img;
$(window).load(function() {
	var options =
	{
		thumbBox: '.thumbBox',
		spinner: '.spinner',
		imgSrc: [[${url}]]
	}
	var cropper = $('.imageBox').cropbox(options);
	$('#upload-file').on('change', function(){
		var reader = new FileReader();
		reader.onload = function(e) {
			options.imgSrc = e.target.result;
			cropper = $('.imageBox').cropbox(options);
		}
		reader.readAsDataURL(this.files[0]);
		this.files = [];
	})

	$('#btnCrop').on('click', function(){
		 img = cropper.getDataURL();
		$('.cropped').html('');
		$('.cropped').append('<img src="'+img+'" align="absmiddle" style="width:64px;margin-top:4px;border-radius:64px;box-shadow:0px 0px 12px #7E7E7E;" ><p>64px*64px</p>');
		$('.cropped').append('<img src="'+img+'" align="absmiddle" style="width:128px;margin-top:4px;border-radius:128px;box-shadow:0px 0px 12px #7E7E7E;"><p>128px*128px</p>');
		$('.cropped').append('<img src="'+img+'" align="absmiddle" style="width:180px;margin-top:4px;border-radius:180px;box-shadow:0px 0px 12px #7E7E7E;"><p>180px*180px</p>');
	})
	$('#btnZoomIn').on('click', function(){
		cropper.zoomIn();
	})
	$('#btnZoomOut').on('click', function(){
		cropper.zoomOut();
	})
});
layui.use(['form','layer'], function(){
        var layer=layui.layer;
    })
function upload() {
    if(img==undefined){
        layer.msg("请先剪切");
         }else{
          $.ajax({
			  url:'/admin/administrators/uploadlogo',
			  method:'post',
			  dataType:'json',
			  data:{imgbase64:img},
			  success:function (data) {
				  if(data.code==200){
                      var index = parent.layer.getFrameIndex(window.name);//获取父id
                      parent.layer.close(index);//关闭当前窗口
					   window.parent.callimgurl(data.url);
                      window.parent.msge("修改成功");//提示

				  }else{
                      var index = parent.layer.getFrameIndex(window.name);//获取父id
                      parent.layer.close(index);//关闭当前窗口
                      window.parent.msge("修改失败");//提示
				  }
              }
		  })
		}
}
</script>
</body>
</html>